前言

（入門~初階程度）

篇名"登堂入室"，寫得冠冕堂皇也只是因為喜歡很台的發音:D
想到朋友用台語唸"踏門入室"覺得很霸氣很有趣，本來登堂入室也有精進自己的意思!

• 文章的主題會盡量挑常見的問題，也會稍微依據自己的學習進度。
• 絕對不適合用來打基礎，建議用途是複習。
• 如果懶得看太多字，重點都在 粗體 和 粗斜體 。

題目來源

1. 前端工程師面試問題集 - H5BP
2. 前端面試問題

就是Google最前面會出現的幾個條目，還有其他爬文常看到但我沒把握解釋的名詞。

有一些很基礎的觀念，例如

• let/var/const的比較
• ==和===的差異

都是很重要的問題，但我沒有花篇幅寫進這系列文章，沒有概念的話還是要自己複習!

目錄

• JavaScript
  1. 解釋 Scope ( Global scope / Function scope / Block scope )
  2. 解釋 Closure ( Scope chain )
  3. 解釋 Hoisting
  4. 關於 Constructor Function
  5. bind, call, apply 的差異
  6. Prototypal inheritance 的運作原理
  7. 解釋 Event Loop ( 上 ) --- Call Stack
  8. 解釋 Event Loop ( 下 ) --- Task Queue ( Callback Queue )
  9. this 題型練習 & 訂正
  10. 解釋 AJAX 的工作原理（XMLHttpRequest）
  11. 解釋 Callback Hell & 使用Promise
  12. 使用 async & await （Fetch API）
  13. 關於 IIFE 的 4 題練習
  14. 解釋 Event bubbling & Event delegation

• 網路相關
  15. HTTP request methods ( 上 )--- GET vs. POST
  16. HTTP request methods ( 下 )--- PUT vs. PATCH
  17. 解釋 Same-Origin Policy
  18. 解釋 JSONP 如何運作
  19. Cookie/ LocalStorage/ SessionStorage 的差別

• 框架相關
  20. React Hooks 想改善的問題 ( + 簡單實作 useState)
  21. React簡易實作 購物車清單(將下層State提升給上層元件 )
  22. React Hooks --- useEffect
  23. React key 的用途
  24. 解釋 immutable / immutability
  (immutable其實是JS的觀念，但因為在React的PureComponent會比較需要，所以放在這裡。)
  25. Redux 的用途 & 入門實作 (上)
  26. Redux 的用途 & 入門實作 (下)

• CSS
  27. 解釋 CSS 的 BFC(Block Formatting Context)
  28. 解釋 CSS Box Model ( box-sizing )
  29. CSS 水平置中/ 垂直置中的方法
  30. CSS 的 z-index & Stacking Context 的形成

【後如內文有誤，希望還請不吝指教>< 並感謝閱覽至此的各位:D】

-----正文結束-----

邊打邊聽OOR的歌《欲望に満ちた青年団》，國中認識他們的時候主要喜歡聽樂器的編制，現在覺得TAKA的歌聲真的很有魅力~
2021.9.1

寫滿10篇了！瀏覽數比我想像的多超級多，原本覺得有人看就是奇蹟了。雖然點進去不一定會看完，但想到也有人在認真學習，就覺得更需要督促自己努力。
2021.9.11

有點遲才完成30篇文章，目錄整理完才終於有完成了的感覺!
2021.10.12